<template>
	<view>
		<view class="title">患者列表</view>
		<view class="search">
			<view style="width: 100%;">
				<uni-search-bar placeholder="搜索患者姓名" placeholder-style="color: #CCCCCC;font-size: 42px;"
					bgColor="#FFFFFF" :radius="100" @confirm="memberPage" v-model="searchValue"/>
			</view>
		</view>
		<!-- 会员列表 -->
		<view style="z-index: 100;">
			<view v-for="(item,index) in list" class="item" style="justify-content: space-between;">
				<view class="content-top" @click="goDetail(item)">
					<view class="people">
						<view>
							<view class="name">{{item.name}}</view>
							<view class="age">{{ this.getAge(item.idnumber)}}岁</view>
						</view>
						<image class="go-icon" src="../static/icon/expend.png"></image>
					</view>
					<view class="people">
						<view class="position">受伤部位：{{ this.getSymptomText(item.symptom) }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-class",
		data() {
			return {
				list: [],
				searchValue:"",
				pageno: 1,
				pagesize: 1000,
				pageCount: 0,
			};
		},
		mounted() {
			this.memberPage();
		},
		methods: {
			memberPage() {
				let that = this;
				uni.request({
					url: "https://guokang365.mordo-care.com/api/member/searchPage",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: {
						"page":{
							"pageno": that.pageno,
							"pagesize": that.pagesize
						},
						"conditions":[{
							"name":"doctorId",
							"operate":"eq",
							"value":getApp().globalData.doctorId + ""
						},{
							"name":"name",
							"operate":"like",
							"value":that.searchValue
						}],
					},
					success: (res) => {
						if (res.data.result != '100') {
							// 获取会员统计数据失败，不确定是否要弹窗
						} else {
							// todo 展示列表
							// that.list = res.data.list;
							that.list = that.list.concat(res.data.list);
							that.pageCount = res.data.list.length;
						}
					},
				});
			},
			

			// 传入身份证号，返回对应的年龄
			getAge(idCard) {
			  // 获取出生年月日
			  const birthYear = idCard.substr(6, 4)
			  const birthMonth = idCard.substr(10, 2)
			  const birthDay = idCard.substr(12, 2)

			  // 构造出生日期对象
			  const birthDate = new Date(`${birthYear}-${birthMonth}-${birthDay}`)

			  // 获取当前日期对象
			  const currentDate = new Date()

			  // 计算出生日期到当前日期的毫秒数
			  const diffTime = currentDate.getTime() - birthDate.getTime()

			  // 转换为年龄并返回
			  return Math.floor(diffTime / (365 * 24 * 60 * 60 * 1000))
			},
			getSymptomText(value) {
			  switch (value) {
			    case 1:
			      return '全髋'
			    case 2:
			      return '全膝'
			    case 3:
			      return '全肩'
			    case 4:
			      return '全肘'
			    case 5:
			      return '掌指'
			    case 6:
			      return '髋部'
			    default:
			      return ''
			  }
			}
		},
		onReachBottom() {
			console.log("onReachBottom:" + this.pageno);
			if (this.pageCount == this.pagesize) {
				this.pageno += 1;
				uni.showLoading({});
				setTimeout(() => {
					this.memberPage();
					uni.hideLoading()
				}, 500);
			}
		},
	}
</script>

<style lang="less">
	.row-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.date {
		width: 134rpx;
		text-align: end;
		font-size: 27rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #393939;
		line-height: 37rpx;
	}

	.head-title {
		height: 37rpx;
		font-size: 27rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #393939;
		line-height: 37rpx;
		margin-left: 70rpx;
	}

	.title {
		font-size: 31rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bolder;
		color: #393939;
		line-height: 42rpx;
		margin-bottom: 27rpx;
		margin-left: 8rpx;
	}

	.search {
		width: 700rpx;
		height: 78rpx;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		border: 1px solid #E1E1E1;
		border-radius: 64px;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background: #F9F9F9;
		border-radius: 13px;
		margin-top: 17rpx;
		height: 150rpx;

		.line {
			width: 1px;
			height: 100%;
			background: #DEDEDE;
			position: absolute;
			right: 24rpx;
			top: 25rpx;
			z-index: 1;
		}

		.time {
			height: 36rpx;
			font-size: 25rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #474747;
			line-height: 36rpx;
			width: 150rpx;
		}

		.dot {
			width: 18rpx;
			height: 18rpx;
			background: #42AE49;
			border-radius: 50%;
			z-index: 2;
		}

		.people {
			margin-top: 30rpx;
			margin-left: 40rpx;
			display: flex;
			// float: right;
			justify-content: space-between
		}

		.go-icon {
			width: 17rpx;
			height: 25rpx;
			position: absolute;
			right: 50rpx;
			// margin-left: 100rpx;
			// position: absolute;
			// margin-top: 10rpx;
		}

		.age {
			height: 30rpx;
			font-size: 23rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: bolder;
			color: #42AE49;
			line-height: 30rpx;
			float: left;
			margin-left: 24rpx;
			margin-top: -4rpx;
			background-color: #F9F9F949;
			border-radius: 29px;
			border: 1px solid #42AE4849;
			// margin: 6px 0 4px 36px;
			padding: 4rpx 10rpx 4rpx 10rpx;
		}

		.name {
			height: 30rpx;
			font-size: 35rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: bolder;
			color: #42AE49;
			line-height: 30rpx;
			float: left;
		}

		.position {
			height: 30rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #484848;
			line-height: 30rpx;
			float: left;
		}
	}

	.active .dot {
		width: 29rpx;
		height: 29rpx;
		background: #FFFFFF;
		border: 6rpx solid #1AC850;
		border-radius: 50%;
		box-sizing: border-box;
		z-index: 2;
	}

	.active .content {
		background: #4CB853;

		.title,
		.name {
			color: #FFFFFF;
		}
	}

	.date-item {
		width: 82rpx;
		height: 114rpx;
		background: #F5F5F5;
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.date1 {
			font-size: 24rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #3F3F3F;
			line-height: 34rpx;
		}

		.date2 {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #3F3F3F;
			line-height: 39rpx;
		}
	}

	.dateactive {
		background: linear-gradient(180deg, #6ADC71 0%, #3DAD44 100%);

		.date1,
		.date2 {
			color: #FFFFFF;
		}
	}
</style>